<template>
    <div>
        <el-card>
            <br>
            <div class="left">
                <tree-left @getListForId="getList"></tree-left>
            </div>
            <div class="right">
                <!-- 主体部分的table -->
                <!-- 按钮 -->
                <div class="buttonGroup">
                    <el-button type="primary" size="small" @click="add">添加内容</el-button>
                </div>
                <div class="inputGroup">
                    <el-input placeholder="请输入内容" v-model="inputSearch" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <br>
                <!-- 表格 -->
                <el-table :data="tableData.row" style="width: 100%" :current-row-key="tableData.row.id">
                    <el-table-column
                        type="selection"
                        width="55"
                    >
                    </el-table-column>
                    <el-table-column
                        type="index"
                        label="编号"
                        width="50"
                    >
                    </el-table-column>
                    <el-table-column label="标题">
                        <template slot-scope="slotProps">
                            <a target="_blank" style="color: #409EFF" :href="'http://localhost:8091/html/contact.html?columnId=' + slotProps.row.columnId + '&contentId=' + slotProps.row.id">{{slotProps.row.title}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型" width="90">
                        <template slot-scope="slotProps">
                            {{slotProps.row.type}}
                        </template>
                    </el-table-column>
                    <el-table-column label="最后更新" width="170">
                        <template slot-scope="slotProps">
                            {{slotProps.row.updateTime}}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="slotProps">
                            {{slotProps.row.status}}
                        </template>
                    </el-table-column>
                    <el-table-column label="浏览量" width="70">
                        <template slot-scope="slotProps">
                            {{slotProps.row.viewCount}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="slotProps">
                                <el-button type="text" @click="edit(slotProps.$index)">编辑</el-button>
                                <el-button type="text" @click="del(slotProps.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <br>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next, jumper"
                        :pager-count="5"
                        :total="page.total"
                        :page-size="page.pageSize"
                        :current-page="page.currentPage"
                        @current-change="handleCurrentChange"
                    >
                    </el-pagination>
                </div>
            </div>
        </el-card>
        <!-- 点击删除按钮出现的弹框 -->
        <el-dialog
            :title="delDialog.title"
            :visible.sync="delDialog.show"
            width="30%"
            center>
            <span>{{delDialog.content}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialog.show = false">取 消</el-button>
                <el-button type="primary" @click="delSure">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击编辑出现的弹框 -->
        <el-dialog
        top="0"
            :title="adedDialog.title"
            :visible.sync="adedDialog.show"
            :before-close="handleClose"
            width="850px"
            center>
            <edit-dialog :form="formData" @getEditorData="getEditor" @getImgPath="getImgPath"></edit-dialog>
            <span slot="footer" class="dialog-footer">
                <el-button @click="restForm">重 置</el-button>
                <el-button type="primary" v-show="adedDialog.showButton" @click="editSure">立即提交</el-button>
                <el-button type="primary" v-show="!adedDialog.showButton" @click="addSure">立即提交</el-button>
                <el-button @click="adedDialog.show = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import treeLeft from './component/tree.vue'
import editDialog from './component/form.vue'
import request from '@/utils/request'
export default {
  components: {
    treeLeft,
    editDialog
  },
  created() {
    this.getList(this.columnId)
  },
  data() {
    return {
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 10
      },
      tableData: {
        row: []
      },
      columnId: '',
      inputSearch: '',
      delDialog: {
        show: false,
        content: '',
        title: '删除',
        id: ''
      },
      adedDialog: {
        show: false,
        content: '',
        title: '',
        showButton: ''
      },
      formData: {},
      editorData: '',
      editorAll: {},
      currentIndex: {
        editIndex: '',
        delIndex: ''
      } // 当前所操作的数据的下标
    }
  },
  methods: {
    getList(columnId) {
      if (!columnId) {
        this.columnId = ''
      } else {
        this.columnId = columnId
      }
      request.get('/cms/articlesInfo/page', { params: {
        size: this.page.pageSize,
        current: this.page.currentPage,
        columnId: this.columnId
      }}).then(res => {
        this.tableData.row = res.content.records
        this.page.total = res.content.total
      })
    },
    // 获取富文本编辑器中的内容，赋值
    getEditor(data) {
      this.editorAll = data
      this.editorData = data.txt.html() // 把富文本编辑器里的内容放在this.editorData里面
    },
    // 根据id查询文章
    getListOfId(id) {
      return request.get(`/cms/articlesInfo/${id}`).then(res => {
        this.formData = res.content // 把详细数据放在formData里面
        if (this.editorAll.txt !== undefined) { // 第一次点击editorAll是个空对象，判断一下  第一次不用赋值
          this.editorAll.txt.html(this.formData.mainBody)
        }
        if (this.formData.imgPath !== null) {
          this.formData.show = true
        } else {
          this.formData.show = false
        }
      })
    },
    // 删除操作
    del(index) {
      this.currentIndex.delIndex = index
      this.delDialog.content = '您确定删除 ' + this.tableData.row[this.currentIndex.delIndex].title + ' 吗？'
      this.delDialog.id = this.tableData.row[this.currentIndex.delIndex].id
      this.delDialog.show = true
    },
    delSure() {
      request.delete(`/cms/articlesInfo/${this.delDialog.id}`).then(res => {
        this.delDialog.show = false
        if (res.code === 0) {
          this.getList(this.columnId)
        }
      })
    },
    // 编辑操作
    edit(index) {
      this.currentIndex.editIndex = index
      var currentId = this.tableData.row[this.currentIndex.editIndex].id
      this.getListOfId(currentId)
      this.adedDialog.title = '编辑'
      this.adedDialog.show = true
      this.adedDialog.showButton = true
    },
    editSure() {
      request.put(
        '/cms/articlesInfo',
        {
          mainBody: this.editorData,
          title: this.formData.title,
          imgPath: this.formData.imgPath,
          status: this.formData.status,
          summary: this.formData.summary,
          id: this.formData.id,
          viewCount: this.formData.viewCount
        }
      ).then(res => {
        this.adedDialog.show = false
        if (res.code === 0) {
          this.formData = res.content
          this.tableData.row.splice(this.currentIndex.editIndex, 1, res.content) // 置换该处的元素
        }
        this.editorAll.txt.clear() // 清空编辑器里的内容
      })
    },
    // 添加操作
    add() {
      this.formData = {}
      this.formData.mainBody = ''
      this.adedDialog.title = '添加'
      this.adedDialog.show = true
      this.adedDialog.showButton = false
    },
    addSure() { //  经过通信，formData与表单中的数据绑定
      this.formData.mainBody = this.editorData
      request.post('/cms/articlesInfo', { ...this.formData }).then(res => {
        this.adedDialog.show = false
        if (res.code === 0) {
          this.getList(this.columnId)
        }
      })
    },
    // 添加、编辑弹框关闭之前的回调函数，只有点击关闭的时候才会触发
    handleClose() {
      this.adedDialog.show = false
      this.restForm()
      this.getList(this.columnId)
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList(this.columnId)
    },
    // 重置添加or编辑的表单
    restForm() {
      // this.formData.mainBody = ''
      this.formData = {}
    },
    getImgPath(data) {
      this.formData.imgPath = data
      console.log('封面图片地址', this.formData.imgPath)
      this.formData.show = true
    }
  }
}
</script>

<style scoped>
.left {
    width: 190px;
    float: left;
}
.right {
    width: calc(100% - 190px);
    float: left;
    border-left: 1px solid #ebeef5;
    padding-left: 5px;
}
.pagination {
  float: right;
  margin-bottom: 15px;
}
.buttonGroup {
    float: left;
}
.inputGroup {
    float: right;
}
</style>
